<template>
  <div>
    <el-row>
      <s-table
        ref="multipleTable"
        v-loading="false"
        :column="tableData.column"
        :data="dataObjects.records"
        :header-cell-class-name="headerCellClass"
        pagination
        background
        layout="total, sizes, prev, pager, next, jumper"
        :page-sizes="[10,20,30,50]"
        :current-page.sync="objQuery.page"
        :total="dataObjects.total"
        :page-size="objQuery.pageSize"
        @size-change="handleSizeChange"
        @p-current-change="handleCurrentChange"
      />
    </el-row>
  </div>
</template>

<script>
import sTable from '@/components/STable/s-table'
export default {
  components: {
    sTable
  },
  props: {
    dataObjects: {
      type: Object,
      required: true,
      default: () => ({})
    },
    objQuery: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      // 表单选择的内容
      multipleSelection: [],
      tableQuery: {
        pageSize: 10,
        page: 1,
        total:0
      },
      // 单列表单
      currentPage: 1,
      total: 10,
      pageSize: 10,
      tableData: {
        column: [
          {
            prop: 'code',
            label: '合同编号',
          },
          {
            prop: 'name',
            label: '合同名称',
          },
          {
            prop: 'partyAName',
            label: '甲方单位',
          },
          {
            prop: 'partyBName',
            label: '乙方单位',
          },
          {
            prop: 'price',
            label: '物料单价',
            render: (h, scope) => {
              const num = (Number(scope.row.price).toFixed(2) + '').replace(
                /\d{1,3}(?=(\d{3})+(\.\d*)?$)/g,
                '$&,'
              )
              return <span>{num}</span>
            }
          },
          {
            prop: 'number',
            label: '物料数量',
            render: (h, scope) => {
              const num = (Number(scope.row.number).toFixed(2) + '').replace(
                /\d{1,3}(?=(\d{3})+(\.\d*)?$)/g,
                '$&,'
              )
              return <span>{num}</span>
            }
          },
          {
            prop: 'total',
            label: '物料总价',
            render: (h, scope) => {
              const num = (Number(scope.row.total).toFixed(2) + '').replace(
                /\d{1,3}(?=(\d{3})+(\.\d*)?$)/g,
                '$&,'
              )
              return <span>{num}</span>
            }
          }
        ],
        data: [],
        options: {
          boundariesElement: 'scrollParent'
        }
      }
    }
  },

  computed: {},
  // watch: {
  //   dataObjects: {
  //     handler: function(val, oldval) {
  //       this.getData()
  //     },
  //     immediate: true, // 关键
  //     deep: true
  //   }
  // },
  mounted() {
    if (document.addEventListener) {
      // firefox
      document.addEventListener(
        'DOMMouseScroll',
        function() {
          document.querySelector('#app').click()
        },
        false
      )
    }
    // 滚动滑轮触发scrollFunc方法  //ie 谷歌
    // window.onmousewheel = document.onmousewheel = function() {
    //   document.querySelector('#app').click()
    // }
  },

  methods: {
    tablecellStyle({ row, column, rowIndex, columnIndex }) {
      if (column.type === 'default') {
        return { 'padding-left': '20px' }
      }
      if (column.type === 'index') {
        return { 'padding-left': '20px' }
      }
    },
    headerCellClass({ row, column, rowIndex, columnIndex }) {
      if (column.type === 'index') {
        return 'indexTableHeaderStyle'
      } else if (column.type === 'selection') {
        if (columnIndex == 0) {
          return 'DisplaySelection_contract_selectTable'
          // return ''
        } else {
          return ''
        }
      } else {
        return 'samples-header-cell'
      }
    },
    // getData() {
    //   this.tableData.data = []
    //   this.tableData.data = this.dataObjects.records
    // },
    handleSizeChange(val) {
      this.objQuery.pageSize = val
      this.objQuery.page = 1
      this.$emit('sonTableQuery', this.objQuery)
    },
    handleCurrentChange(val) {
      this.objQuery.page = val
      this.$emit('sonTableQuery', this.objQuery)
    }
  }
}
</script>
<style lang='scss' scoped>
</style>
